<template>
    <div idf="navtop">
        <el-form :inline="true" :model="new_form" label-width="auto" style="max-width: 800px">
            <el-form-item label="权限名称">
                <el-input v-model="new_form.title" />
            </el-form-item>
            <el-form-item label="权限路由">
                <el-input v-model="new_form.url" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" :icon="Plus" @click="add_permissions">新增权限</el-button>
            </el-form-item>
        </el-form>
    </div>
    <el-table :data="tableData" style="width: 80%">
        <el-table-column prop="id" label="ID" width="180" />
        <el-table-column prop="title" label="权限名称" width="180" />
        <el-table-column prop="url" label="权限路由" />
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="primary" size="small" :icon="Edit" @click="edit(scope.row)">编辑</el-button>
                <el-popconfirm title="确认删除该权限？" confirm-button-text="是" cancel-button-text="否"
                    @confirm="confirm_delete(scope.row.id)">
                    <template #reference>
                        <el-button size="small" type="danger" :icon="Delete">删除</el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination id="pagination" v-model:current-page="PageNo" v-model:page-size="PageSiez"
        :page-sizes="[10, 20, 30, 40]" background layout=" prev, pager, next, jumper,->,total, sizes" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" style="width: 100%;" />
    <el-dialog v-model="dialogVisible" title="修改权限" width="500" :before-close="handleClose">
        <el-form :model="form" label-width="auto" style="max-width: 600px">
            <el-form-item label="权限id">
                <el-input v-model="form.id" readonly />
            </el-form-item>
            <el-form-item label="权限名称">
                <el-input v-model="form.title" />
            </el-form-item>
            <el-form-item label="权限路由">
                <el-input v-model="form.url" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="change_permissions">
                    提交修改
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, onMounted } from "vue"
let tableData = ref([])
import axios from '../../utils/http.js'
let dialogVisible = ref(false)
import { ElMessage } from 'element-plus'

let PageNo = ref(1);
let PageSiez = ref(10);
let total = ref(20);

let new_form = ref({
    title: '',
    url: ''
})

function handleSizeChange() {
    update_permissions()
}

function handleCurrentChange() {
    update_permissions()
}

let form = ref({
    id: '',
    title: '',
    url: ''
})
function edit(row) {
    dialogVisible.value = true
    form.value = row
}

function confirm_delete(id) {
    axios({
        url: 'permission_manage/' + id + '/',
        method: 'delete'
    }).then(res => {
        if (res.data.code == 200) {
            ElMessage({
                message: '删除成功',
                type: 'success',
            })
            update_permissions()
        } else {
            ElMessage({
                message: res.data.msg,
                type: 'warning',
            })
        }
    })
}

function change_permissions() {
    axios({
        url: 'permission_manage/' + form.value.id + '/',
        method: 'put',
        data: form.value
    }).then(res => {
        if (res.data.code == 200) {
            ElMessage({
                message: '修改成功',
                type: 'success',
            })
            dialogVisible.value = false
            update_permissions()
        } else {
            ElMessage({
                message: res.data.msg,
                type: 'warning',
            })
        }
    })
}

function add_permissions() {
    if (new_form.value.title != '' || new_form.value.url != '') {
        axios({
            url: 'permission_manage/',
            method: 'post',
            data: new_form.value
        }).then(res => {
            if (res.data.code == 200) {
                ElMessage({
                    message: '添加权限成功',
                    type: 'success',
                })
                new_form.value.title = ''
                new_form.value.url = ''
                update_permissions()
            } else {
                ElMessage({
                    message: res.data.msg,
                    type: 'warning',
                })
            }
        })
    }
}

function update_permissions() {
    axios({
        url: 'user/pagenation/',
        method: 'get',
        params: {
            p_id: PageNo.value,
            p_num: PageSiez.value
        }
    }).then(res => {
        tableData.value = res.data.data
        total.value = res.data.total
    })
}

onMounted(() => {
    update_permissions()
})
</script>

<style scoped>
#pagination {
    margin-top: 20px;
}
</style>